<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>填写订单</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../node_modules/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../css/order_form.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <mt-header fixed title="填写订单">
            <a href="./shop_cart.html" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <a href="./address.html">
            <div class="person_message">
                <div class="message_top">
                    <p>{{addresses.consignee}}</p>
                    <p>{{addresses.mobile}}</p>
                </div>
                <div class="message_bottom">
                    <p>{{addresses.address}}</p>
                </div>
                <span class="iconfont icon-youjiantou-01 right_arrow_icon"></span>
            </div>
        </a>
        <div class="line_below"></div>
        <div class="order_content_1" v-for="item1 in shop_message">
            <mt-cell :title='item1.shop_name'>
                <img src="../images/house.png" width="16" height="16" slot="icon" alt="">
            </mt-cell>
            <div class="order_panel" v-for="item in order_content">
                <img :src="item.goods_img" alt="">
                <div class="panel_right">
                    <p>{{item.goods_name}}</p>
                    <p class="format">{{item.goods_spec}}</p>
                    <div style="clear: both;"></div>
                    <p class="price">￥{{item.price}}</p>
                    <p class="num">×{{item.buy_number}}</p>
                </div>
            </div>
            <mt-field placeholder="给卖家留言" v-model="leave_message" :key='item1.shop_id'></mt-field>
            <mt-cell title="运费">
                <span class="freight">￥{{item1.shop_express}}</span>
            </mt-cell>
        </div>
        <div class="order_content_2">
            <mt-cell title="商品总数">
                <span class="num_all">共{{num_all}}件</span>
            </mt-cell>
            <mt-cell title="商品总价">
                <span class="price_all">￥{{price_all}}</span>
            </mt-cell>
            <mt-cell title="总运费">
                <span class="freight_all">￥{{freight_all}}</span>
            </mt-cell>
            <mt-cell title="打欠条">
                <span class="debt_text">(当前欠条可打￥{{debt}})</span>
                <mt-switch v-model="debt_value" @change="show_debt"></mt-switch>
            </mt-cell>
            <mt-cell title="请输入欠条金额">
                <mt-field v-model="debt_money" @input="entry"></mt-field>
            </mt-cell>
        </div>
        <div class="footer">
            <mt-cell title="实际应付:" style="position: fixed;bottom: 0;width: 100%;">
                <span class="actul_price">￥{{actul_price}}</span>
                <mt-button type="danger" @click="skip">提交订单</mt-button>
            </mt-cell>
        </div>
    </div>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/mint-ui/lib/index.js"></script>
    <script src="../js/global.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                /* name: '张强',
                tel: 13823532943,
                address: '山东省临沂市兰山区金雀山路与陶然路90号', */
                /*  order_content: [
                     { title: '小伟墙材', avatar: '../images/house.png', avatar2: '../images/panel_img.png', content: '聚酯纤维吸音板隔音材料幼儿园装饰艺术吸 声板琴房 常熟吸音板', format: '蓝色30mm', price: '115.00', num: 5, leave_message: '', freight: '15.00' },
                     { title: '小伟墙材', avatar: '../images/house.png', avatar2: '../images/panel_img.png', content: '聚酯纤维吸音板隔音材料幼儿园装饰艺术吸 声板琴房 常熟吸音板', format: '蓝色30mm', price: '115.00', num: 5, leave_message: '',freight: '15.00' }
                 ], */
                order_content: '',
                leave_message: '',
                debt: '',
                debt_value: true,
                debt_money: 0,
                addresses: '',
                shop_message: '',
                freight_all: '',
                price_all: '',
                num_all: '',
                // actul_price:''
            },
            created() {
                // var cart_id = localStorage.getItem('cart_id');
                var cart_id = GetQueryString('cart_id');
                var address_id = GetQueryString('address_id');
                var token = GetQueryString('token');
                $.ajax({
                    url: BaseUrl + '/index.php/Api/CartApi/cartConfirm',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'token': token,
                        'cart_id': cart_id,
                        'address_id': address_id
                    },
                    success(data) {
                        console.log(data);
                        vm.addresses = data.data.addr_info;
                        vm.order_content = data.data.goods_list[0].goods_list;
                        vm.shop_message = data.data.goods_list;
                        vm.freight_all = data.data.total_express;
                        localStorage.setItem('freight_all', vm.freight_all);
                        vm.price_all = data.data.total_goods_amount;
                        localStorage.setItem('price_all', vm.price_all);
                        vm.num_all = data.data.total_goods_num;
                        localStorage.setItem('num_all', vm.num_all);
                        vm.debt = data.data.debt_amount;
                        localStorage.setItem('actul_price', vm.actul_price);
                        localStorage.setItem('debt_money', vm.debt_money);
                    },
                    error(err) {
                        console.log(err);
                    }
                });
            },
            computed: {
                actul_price() {
                    // return this.price_all + this.freight_all - this.debt_money;
                    if (this.show_debt && this.debt != 0) {
                        return (Number(this.freight_all) + Number(this.price_all) - Number(this.debt_money)).toFixed(2);
                    } else {
                        return (Number(this.freight_all) + Number(this.price_all)).toFixed(2);
                    }
                }
            },
            filters: {
                toFixed(value) {
                    return value.toFixed(2);
                }
            },
            methods: {
                show_debt(event) {
                    // 触发是否选中的事件，并得到状态
                    console.log(event);
                },
                entry() {
                    if (Number(this.debt_money) > Number(this.price_all)) {
                        this.$toast({
                            message: '你输入的金额超出了商品总价了哦',
                            duration: 1000
                        })
                        this.debt_money = '';
                    }
                },
                skip() {
                    var token = GetQueryString('token');
                    $.ajax({
                        url: BaseUrl + '/index.php/Api/OrderApi/addToOrder',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            'token': token,
                            'address_id': address_id,
                            'shop_id': 1,
                            'debt_amount': this.debt
                        },
                        success(data) {
                            // console.log(data);
                            localStorage.setItem('order_sn', data.data.order_sn);
                            localStorage.setItem('actul_price', data.data.real_pay_amount);
                        },
                        error(err) {
                            console.log(err);
                        }
                    })
                    window.location.href = './payoff.html';
                }
            }
        })
    </script>
</body>

</html>